<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>00:00:00:0000</div>
    <button>开始</button>
    <script>
        var h = 0,m = 0,s = 0,mi = 0,count = 0,time;
        var but = document.querySelector("button");
        var div = document.querySelector("div");

        but.onclick = function(){
            count++;
            if(count % 2 == 0){
                // 暂停操作,设置下一次点击内容是开始
                but.innerHTML = "开始";
                clearInterval(time);
                h = 0;m = 0;s = 0;mi = 0
                return;
            }
            // 开始操作,设置下一次点击内容是暂停
            but.innerHTML = "暂停";
            time = setInterval(function(){
                mi+=5;
                // console.log(mi);
                if(mi >= 1000) {
                    mi = 0;
                    s++;
                }
                // console.log(s);
                if(s >= 60){
                    m++;
                    s = 0;
                }
                if(m >= 60){
                    h++;
                    m = 0;
                }
                // console.log(h,m,s,mi);
                var h1 = h < 10 ? "0" + h : h;
                var m1 = m < 10 ? "0" + m : m;
                var s1 = s < 10 ? "0" + s : s;
                var mi1 = mi + "";
                mi1 = mi1.padStart(4,"0");
                div.innerHTML = `${h1}:${m1}:${s1}:${mi1}`;
            },5)
        }
    </script>
</body>
</html>